<template>
  <el-dialog :title="showTitle" :visible="showDialog" @close="delsc">
    <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="roleForm.name" style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="roleForm.description" style="width:300px"></el-input>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="center">
      <el-button size="small" @click="delsc">取消</el-button>
      <el-button size="small" type="primary" @click="updateRole">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { getRoleDetail, updateRole, addRole } from "@/api/setting";
export default {
  name: "TanChuang",
  props: {
    showDialog: {
      type: Boolean,
      default: false // 控制编辑和新增弹层的显示
    },
    zzcID: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      roleForm: {
        // 存放 编辑和弹层的数据
        name: "",
        description: ""
      },
      rules: {
        name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    async editRole(id) {
      this.roleForm = await getRoleDetail(id);
      // console.log(zzcID);
      console.log(this.roleForm);
    },
    async updateRole() {
      try {
        await this.$refs.roleForm.validate();
        // 只有校验通过才执行下方
        if (this.roleForm.id) {
          await updateRole(this.roleForm);
        } else {
          await addRole(this.roleForm);
        }
        // alert("修改成功");
        this.$message.success("用户信息保存成功");
        this.$emit("updateRole");
        this.$emit("update:showDialog", false);
      } catch (error) {
        console.log(error);
      }
    },
    // 给弹层绑定一个close 事件，不管以什么操作关闭弹框，会自动触发close关闭事件
    delsc() {
      this.roleForm = {
        // 存放 编辑和弹层的数据
        name: "",
        description: ""
      };
      this.$refs.roleForm.resetFields();
      this.$emit("update:showDialog", false);
    }
  },
  computed: {
    showTitle() {
      return this.roleForm.id ? "编辑部门" : "新增部门";
    }
  }
};
</script>

<style>
</style>